<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆维修</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="addRepairDialogVisible=true"
               :disabled="user.parentId==null">录入维修车辆</el-button>
  </div>
<!--    车辆维修弹窗-->
    <el-dialog :title="dialogTitle" v-model="addRepairDialogVisible"
               style="width:1000px;padding:40px;" :before-close="handleClose">
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="送修人">
              <el-input
                  v-if="addRepairForm.id == null"
                  readonly
                  :value="user.username"
              ></el-input>
              <el-input
                  v-else
                  v-model="addRepairForm.username"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修车辆">
              <el-select placeholder="请选择" v-model="addRepairForm.vehicleId">
                <el-option v-for="item in vehicleidOptions" :label="item.label" :value="item.value"></el-option>
<!--                <el-option label="京B28323" value="102"></el-option>-->
<!--                <el-option label="京C29323" value="103"></el-option>-->
<!--                <el-option label="京D96552" value="104"></el-option>-->
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维修项目">
              <el-select placeholder="请选择" v-model="addRepairForm.item">
                <el-option label="汽车保养" value="10"></el-option>
                <el-option label="汽车美容" value="20"></el-option>
                <el-option label="钣金喷漆" value="30"></el-option>
                <el-option label="四轮定位" value="40"></el-option>
                <el-option label="机修" value="50"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修地点">
              <el-select placeholder="请选择" v-model="addRepairForm.addr">
                <el-option label="沃尔沃专修店" value="10"></el-option>
                <el-option label="美奥行汽修" value="20"></el-option>
                <el-option label="悦心金峰盛车检汽修" value="30"></el-option>
                <el-option label="京昌鑫顺汽修" value="40"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维修材料">
                <el-select placeholder="请选择" v-model="addRepairForm.material">
                  <el-option label="汽缸垫进排气歧管垫" value="10"></el-option>
                  <el-option label="发动机前后悬挂胶垫" value="20"></el-option>
                  <el-option label="板簧胶套" value="30"></el-option>
                  <el-option label="消声器" value="40"></el-option>
                  <el-option label="气门弹簧" value="50"></el-option>
                  <el-option label="气门" value="60"></el-option>
                  <el-option label="止推垫" value="70"></el-option>
                  <el-option label="大小瓦" value="80"></el-option>
                  <el-option label="四配套（缸套、活塞、活塞环、活塞销）" value="90"></el-option>
                  <el-option label="轴承" value="100"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修费用">
              <el-input v-model="addRepairForm.fee"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维修时间">
              <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
              v-model="addRepairForm.repairTime"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修状态">
              <el-radio-group v-model="addRepairForm.status">
                <el-radio  label="维修中" value="1"></el-radio>
                <el-radio  label="已完成" value="0"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveRepair">保存</el-button>
      </template>
    </el-dialog>
    <!-- 车辆维修列表 搜索卡片 -->
    <el-card style="margin: 20px;">
      <el-form style="padding-top:10px;">
        <el-row :gutter="30">
          <el-col :span="5">
            <el-form-item label="维修车辆">
              <el-input placeholder="请输入车牌号"  v-model="searchRepairForm.license"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="送修人员">
              <el-input placeholder="请输入送修人姓名" v-model="searchRepairForm.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="维修状态">
              <el-select placeholder="请选择" v-model="searchRepairForm.status">
<!--                <el-option v-for="item in appOptions" :label="item.label" :value="item.value"></el-option>-->
                              <el-option label="空闲" value="1"></el-option>
                              <el-option label="占用" value="2"></el-option>
                              <el-option label="维修" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button @click="resetSearch">重置</el-button>
              <el-button type="primary" @click="loadRepair">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 车辆维修表格 -->
    <el-card style="margin:20px">
      <el-table :data="repairArr">
        <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
        <el-table-column align="center" prop="vehicleId" label="维修车辆" :formatter="vehicleLicenseFormatter"></el-table-column>
        <el-table-column align="center" prop="item" label="维修项目" :formatter="itemFormatter"></el-table-column>
        <el-table-column align="center" prop="username" label="送修人员"></el-table-column>
        <el-table-column align="center" prop="addr" label="维修地点" :formatter="repairAddrFormatter"></el-table-column>
        <el-table-column align="center" prop="repairTime" label="维修时间"></el-table-column>
        <el-table-column align="center" prop="fee" label="维修费用"></el-table-column>
        <el-table-column align="center" prop="material" label="维修材料" :formatter="materialFormatter"></el-table-column>
        <el-table-column align="center" prop="status" label="维修状态" :formatter="repairStatusFormatter"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="editRepair(scope.row.id)">编辑</el-button>
            <el-button link type="primary" size="small" @click="deleteReqair(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

onMounted(()=>{
  loadRepair();
})
//定义弹窗标题
const dialogTitle = ref('录入维修车辆');

const user = ref(getUser());
// 录入维修车辆弹窗
const addRepairDialogVisible = ref(false);
//定义保存录入维修车辆表单的数据
const addRepairForm = ref({
  id: '',
  username: '',
  vehicleId: '',
  item: '',
  addr: '',
  material: '',
  fee: '',
  repairTime: '',
  status: ''
});
// 添加维修车辆和更新维修车辆
const saveRepair = () => {
  // 提交表单
  console.log(addRepairForm.value);
  addRepairForm.value.userId = user.value.id;
  addRepairForm.value.username = user.value.username;
  let data = qs.stringify(addRepairForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/repair/save',data).then((response)=>{
    if (response.data.code == 2000){
      ElMessage.success('保存成功!');
      // 关闭弹窗
      addRepairDialogVisible.value = false;
      addRepairForm.value = {};
      loadRepair();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
};
// 处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('确认要关闭弹窗吗?')){
    addRepairForm.value = {};
    addRepairDialogVisible.value = false;
  }
};

//定义保存搜索框条件
const searchRepairForm = ref({
  license: '',
  username: '',
  status: ''
});

//定义数组来保存所有维修项目
const repairArr = ref([]);

// 定义加载维修项目的方法
const loadRepair = () => {
  let data = qs.stringify(searchRepairForm.value)
  axios.get(BASE_URL+'/v1/repair/select?'+data).then((response)=>{
    if (response.data.code == 2000){
      repairArr.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//重置搜索
const resetSearch = () => {
  searchRepairForm.value = {};
  loadRepair();
}

//定义编辑维修项目的方法
const editRepair = (id)=>{
  addRepairForm.value.id = id;
  addRepairDialogVisible.value = true;
  dialogTitle.value = '编辑维修车辆';
  console.log('获取到的id='+id);
  axios.get(BASE_URL+'/v1/repair/select?id='+id).then((response)=>{
    if (response.data.code == 2000){
      addRepairForm.value = response.data.data[0];
      console.log(addRepairForm.value)
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

//定义删除维修项目的方法
const deleteReqair = (id) => {
  if (confirm('确认要删除吗?')){
    axios.post(BASE_URL+'/v1/repair/delete?id='+id).then((response)=>{
      if (response.data.code == 2000){
        ElMessage.success('删除成功!');
        loadRepair();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

// 准备数组来保存维修车辆字典项
const vehicleidOptions = ref([]);
//准备一个数组来保存维修项目字典项
const itemOptions = ref([]);
// 准备数组来保存维修地点字典项
const addrOptions = ref([]);
// 准备数组来保存维修材料字典项
const materialOptions = ref([]);
// 准备数组来保存维修状态字典项
const statusOptions = ref([]);
onMounted(()=>{
  loadDictOption(vehicleidOptions,'vehicleId_type');
  loadDictOption(addrOptions,'addr_type');
  loadDictOption(itemOptions,'item_type');
  loadDictOption(materialOptions,'material_type');
  loadDictOption(statusOptions,'status_type');
})
//定义方法用来转换表格列的显示文字,将维修车辆替换为字典项的文字
const vehicleLicenseFormatter = (row, column, cellValue, index) => {
  if (!vehicleidOptions.value){
    return cellValue;
  }
  for (let item of vehicleidOptions.value){
    if (item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
//定义方法来转换表格列的显示文字,将维修地点替换为字典项的文字
const repairAddrFormatter = (row, column, cellValue, index) => {
  if (!addrOptions.value){
    return cellValue;
  }
  for (let item of addrOptions.value){
    if (item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
//定义方法来转换表格列的显示文字,将维修项目替换为字典项的文字
const itemFormatter = (row, column, cellValue, index) => {
  if (!itemOptions.value){
    return cellValue;
  }
  for (let item of itemOptions.value){
    if (item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
//定义方法来转换表格列的显示文字,将维修材料替换为字典项的文字
const materialFormatter = (row, column, cellValue, index) => {
  if (!materialOptions.value){
    return cellValue;
  }
  for (let item of materialOptions.value){
    if (item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
const repairStatusFormatter = (row, column, cellValue, index) => {
  if (!statusOptions.value){
    return cellValue;
  }
  for (let item of statusOptions.value){
    if (item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
</script>

<style scoped>

</style>